<template>
  <div class="app-container">
    <Card dis-hover class="task-card">
      <div class="app-container">
        <el-row type="flex" justify="start">
          <el-form
            :inline="true"
            :model="queryForm"
            class="demo-form-inline"
            label-width="68px"
            size="mini"
          >
            <el-form-item label="状态">
              <Select v-model="statusDefault" style="width: 200px">
                <Option
                  v-for="item in statusList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button type="default" @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <Modal
          :mask-closable="false"
          title="添加委托"
          v-model="addModel"
          :transfer="false"
          width="80%"
        >
          <!--              <div slot="footer"  v-if="addForm.id.length==0">-->
          <!--                <Button type="primary" @click="handleSubmit('addForm')">确定</Button>-->
          <!--                <Button @click="handleReset('addForm')">取消</Button>-->

          <!--              </div>-->
        </Modal>

        <el-row class="margin:30px;">
          <el-col>
            <el-table
              :data="tableData"
              size="mini"
              style="width: 100%"
              :height="tableHeight"
            >
              <el-table-column fixed prop="name" label="名称">
              </el-table-column>
              <el-table-column prop="formKey" label="流程别名">
              </el-table-column>
              <el-table-column prop="formDesc" label="描述"> </el-table-column>
              <el-table-column prop="formType" label="类型"> </el-table-column>
              <el-table-column prop="groupName" label="分组"> </el-table-column>
              <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                  <el-tag
                    v-if="scope.row.status == null || scope.row.status == ''"
                    type="warning"
                    >未发布</el-tag
                  >
                  <el-tag v-else type="success">已发布</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="version" label="版本号"> </el-table-column>
              <el-table-column prop="main" label="是否主版本">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.main == '1'" type="success"
                    >是</el-tag
                  >
                  <el-tag v-else type="warning">否</el-tag>
                </template>
              </el-table-column>

              <el-table-column
                prop="operate"
                label="操作"
                fixed="right"
                width="300"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="mini"
                    @click="hisVersionDefDetail(scope.row)"
                    >查看表单</el-button
                  >
                  <el-button
                    v-if="scope.row.main == '1'"
                    size="mini"
                    type="text"
                    @click="setVersion(scope.row.id)"
                  >
                    设为主版本
                  </el-button>
                  <el-button
                    v-if="scope.row.main == '0'"
                    size="mini"
                    type="text"
                    @click="setVersion(scope.row.id)"
                  >
                    设为主版本
                  </el-button>
                  <el-button
                    v-if="scope.row.main == '0'"
                    type="text"
                    size="mini"
                    @click="del(scope.row.id)"
                    >删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row type="flex" justify="end">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="queryForm.page"
            :page-size="queryForm.pageSize"
            layout="prev, pager, next, sizes, total, jumper"
            :total="total"
          >
          </el-pagination>
        </el-row>
        <Modal
          :mask-closable="false"
          v-model="viewImageModeler"
          fullscreen
          title="快照图"
          :transfer="false"
        >
          <div
            v-if="jsonData.config != null"
            class="container"
            ;
            style="overflow: auto; max-height: 550px"
          >
            <fm-generate-form
              ref="generateForm"
              :data="jsonData"
              :remote="remoteFuncs"
              :value="editData"
              :remote-option="dynamicData"
            />
          </div>

          <div slot="footer"></div>
        </Modal>
      </div>
    </Card>
  </div>
</template>

<script>
import { getVersionManagerByKey } from "@/api/analy";
import {
  formRemove,
  formUpdateMain,
  getFormModelTableListAllJson,
  getFormModelById,
} from "@/api/form";

export default {
  name: "Task",
  components: {},

  data() {
    return {
      jsonData: {},
      dynamicData: null,
      editData: {},
      remoteFuncs: {},
      tableData: [],
      tableHeight: 450,
      queryDate: [],
      total: 0,
      chartVisible: false,
      viewImageModeler: false,
      forbiddenSwitch: false,
      addModel: false,
      chartData: {},
      sellerId: 0,
      shopName: [],
      statusDefault: "",
      statusList: [
        { label: "未发布", value: "draft" },
        { label: "已发布", value: "deploy" },
      ],
      queryForm: {
        modelKey: "",
        modelId: "",
        status: "",
        page: 1,
        pageSize: 10,

        limit: 10,
      },
      categoryData: [],
    };
  },
  mount() {
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop;
  },
  created() {
    var query = this.$route.query;
    this.queryForm.modelKey = query.modelKey;
    this.getData();
  },
  methods: {
    setVersion: function (id) {
      formUpdateMain(id).then((response) => {
        this.tableData = response.data;
        this.total = parseInt(response.count);
        this.getData();
      });
    },
    del: function (id) {
      formRemove(id).then((response) => {
        if (response.code == 0) {
          this.getData();
        }
      });
    },
    hisVersionDefDetail: function (row) {
      getFormModelById(row.id).then((response) => {
        if (response.code == 0) {
          this.jsonData = JSON.parse(response.data);
          this.viewImageModeler = true;
        } else {
          this.$message({
            duration: 800,
            message: response.msg,
            type: "warning",
            customClass: "zZindex",
          });
        }
      });
    },
    queryFormCreateTime: function (e) {
      this.queryForm.tmpCreateTime = e;
    },
    queryFormEndTime: function (e) {
      this.queryForm.tmpEndTime = e;
    },
    queryMethod: function () {
      // var name = this.queryForm.name;
      var tmpCreateTime = this.queryForm.tmpCreateTime;
      if (tmpCreateTime) {
        if (tmpCreateTime[0]) {
          this.queryForm.createTime =
            tmpCreateTime[0] + " - " + tmpCreateTime[1];
        }
      }
      getVersionManagerByKey(this.queryForm).then((response) => {
        this.tableData = response.data;

        this.total = parseInt(response.count);
      });
    },

    getData: function () {
      getFormModelTableListAllJson(this.queryForm).then((response) => {
        this.tableData = response.data;
        this.total = parseInt(response.count);
      });
    },
    handleCurrentChange(val) {
      this.queryForm.page = val;
      this.getData();
    },
    search() {
      this.queryForm.status = this.statusDefault;
      this.getData();
      this.queryForm.status = "";
    },
    reset() {
      this.statusDefault = "";
      this.queryForm.status = "";
      this.getData();
    },
  },
};
</script>
<style lang="scss">
.task-card {
  margin-top: 10px;
}
</style>
